<script setup lang="ts">
  import {SUCCESS_CODE} from '../common/constants'
  const props = defineProps({
    collect: {
      type: Object,
      require: false
    }
  })
  const showModal= ref(false)
  const bodyStyle= ref({
    width: '600px'
  })
  const segmented = ref({
    content: 'soft',
    footer: 'soft'
  })
  const model = ref({
    id: '',
    name: '',
    content: '',
    privacy: '0'
  })
  const formRef = ref<FormInst | null>(null)
  const rules: FormRules = ref({
    name: [
      {
        required: true,
        validator (rule: FormItemRule, value: string) {
          if (!value) {
            return new Error('请输入文集名称')
          }
          return true
        },
        trigger: ['input', 'blur']
      }
    ]})
  const nuxtApp = useNuxtApp()
  const emit = defineEmits(['change'])

  function createCollect(e) {
    e.preventDefault()
    formRef.value?.validate(async (errors) => {
      if (!errors) {
        // 新增
        // const reqData = new FormData();
        // reqData.append('name', model.value.name)
        // // reqData.append('headImage', '')
        // reqData.append('description', model.value.content)
        // reqData.append('status', model.value.privacy)
        const modelVal = model.value
        let reqData = {
          name: modelVal.name,
          description: modelVal.content,
          status: modelVal.privacy,
        }
        const isUpdate = !!modelVal.id
        // if (isUpdate) reqData.append('id', model.value.id)
        if (isUpdate) reqData.id = modelVal.id
        const {data, msg, code} = await nuxtApp.$request('/u/collection', {
          method: isUpdate ? 'PUT' : 'POST',
          server: false,
          key: 'createUCollection',
          body: reqData
        })
        if(code === SUCCESS_CODE) {
          emit('change', true)
          showModal.value = false
          nuxtApp.$mutual.message.success(msg)
        }
      } else {
        console.log(errors)
        nuxtApp.$mutual.message.warning(errors.message, {

        })
      }
    })
  }
  function modalOpen() {
    if (props.collect.id) {
      const collectCopyData = {...props.collect}
      model.value = {
        id: collectCopyData.id,
        name: collectCopyData.name,
        content: collectCopyData.description,
        privacy: `${~~collectCopyData.status}`
      }
    }
    showModal.value = true
  }
  watch(showModal, (n) => {
    if (!n) {
      model.value = {
        id: '',
        name: '',
        content: '',
        privacy: '0'
      }
    }
  })
  defineExpose({
    modalOpen
  })
</script>
<template>
  <div class="list-create" @click="showModal = true">
    <svg width="10" height="10" viewBox="0 0 10 10" fill="none"
         xmlns="http://www.w3.org/2000/svg" class="add-icon">
      <path fill-rule="evenodd" clip-rule="evenodd"
            d="M5.17951 0C5.29095 0 5.33136 0.0116032 5.37211 0.0333916C5.41285 0.05518 5.44482 0.0871535 5.46661 0.127894C5.4884 0.168635 5.5 0.209046 5.5 0.320486V4.5H9.67951C9.79095 4.5 9.83136 4.5116 9.87211 4.53339C9.91285 4.55518 9.94482 4.58715 9.96661 4.62789C9.9884 4.66864 10 4.70905 10 4.82049V5.17951C10 5.29095 9.9884 5.33136 9.96661 5.37211C9.94482 5.41285 9.91285 5.44482 9.87211 5.46661C9.83136 5.4884 9.79095 5.5 9.67951 5.5H5.49975L5.5 9.67951C5.5 9.79095 5.4884 9.83136 5.46661 9.87211C5.44482 9.91285 5.41285 9.94482 5.37211 9.96661C5.33136 9.9884 5.29095 10 5.17951 10H4.82049C4.70905 10 4.66864 9.9884 4.62789 9.96661C4.58715 9.94482 4.55518 9.91285 4.53339 9.87211C4.5116 9.83136 4.5 9.79095 4.5 9.67951L4.49975 5.49975L0.320486 5.5C0.209046 5.5 0.168635 5.4884 0.127894 5.46661C0.0871535 5.44482 0.05518 5.41285 0.0333916 5.37211C0.0116032 5.33136 0 5.29095 0 5.17951V4.82049C0 4.70905 0.0116032 4.66864 0.0333916 4.62789C0.05518 4.58715 0.0871535 4.55518 0.127894 4.53339C0.168635 4.5116 0.209046 4.5 0.320486 4.5L4.5 4.49975V0.320486C4.5 0.209046 4.5116 0.168635 4.53339 0.127894C4.55518 0.0871535 4.58715 0.05518 4.62789 0.0333916C4.66864 0.0116032 4.70905 0 4.82049 0H5.17951Z"
            fill="#1E80FF"></path>
    </svg>
    <span>{{model.id ? '修改' :  '新建'}}收藏集</span>
  </div>
  <n-modal
    v-model:show="showModal"
    class="custom-card"
    preset="card"
    :style="bodyStyle"
    :title="`${model.id ? '修改' :  '新建'}收藏集`"
    size="huge"
    :bordered="false"
    :segmented="segmented"
  >
    <!--<template #header-extra>-->
      <!--''-->
    <!--</template>-->
    <div>
      <n-form ref="formRef" :model="model" :rules="rules">
        <n-form-item path="name" label="名称">
          <n-input v-model:value="model.name" placeholder="请输入文集名称"/>
        </n-form-item>
        <n-form-item path="content" label="描述">
          <n-input
            v-model:value="model.content"
            type="textarea"
            placeholder="请输入收藏描述"
            :maxlength="100"
            :show-count="true"
          />
        </n-form-item>
        <n-form-item
          path="privacy"
          label=""
        >
          <n-radio-group v-model:value="model.privacy">
            <n-radio value="0">
              私有(仅自己可见此收藏集)
            </n-radio>
            <br/>
            <n-radio value="1">
              公开(当其他人关注此收藏集后不可再更改为隐私)
            </n-radio>
          </n-radio-group>
        </n-form-item>
      </n-form>
    </div>
    <template #footer>
      <div style="display: flex; justify-content: flex-end">
        <n-button class="cancel-btn" type="primary" ghost @click="showModal = false">
          取消
        </n-button>
        <n-button
          :disabled="!model.name"
          type="primary"
          @click="createCollect"
        >
          确定
        </n-button>
      </div>
    </template>
  </n-modal>
</template>
<style scoped lang="scss">
  .list-create {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    color: #1e80ff;
    font-size: 14px;
    cursor: pointer;
  }
  .add-icon {
    width: 10px;
    height: 10px;
    margin-right: 5px;
  }
  .cancel-btn {
    margin-right: 12px;
  }
</style>
